<template>
  <div
    style="position: relative;height: 100%;padding: 50px;background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);">
    <div
      style="position: relative;width: 100%;background-color: white;padding:5px;margin-bottom:10px">
      <el-tag style="margin-left: 30px;font-size: 18px;">采集时间:{{ airnewestinfo.createTime }}</el-tag>
      <el-tag style="margin-left: 30px;font-size: 18px;">PM1.0:{{ airnewestinfo.pm1 }}</el-tag>
      <el-tag style="margin-left: 30px;font-size: 18px;">PM2.5:{{ airnewestinfo.pm2 }}</el-tag>
      <el-tag style="margin-left: 30px;font-size: 18px;">PM10:{{ airnewestinfo.pm3 }}</el-tag>
      <el-tag style="margin-left: 30px;font-size: 18px;">0.3um以上:{{ airnewestinfo.pm4 }}</el-tag>
      <el-tag style="margin-left: 30px;font-size: 18px;">0.5um以上:{{ airnewestinfo.pm5 }}</el-tag>
      <el-tag style="margin-left: 30px;font-size: 18px;">1.0um以上:{{ airnewestinfo.pm6 }}</el-tag>
      <el-tag style="margin-left: 30px;font-size: 18px;">2.5um以上:{{ airnewestinfo.pm7 }}</el-tag>
      <el-tag style="margin-left: 30px;font-size: 18px;">温度:{{ airnewestinfo.temperature1 }}</el-tag>
      <el-tag style="margin-left: 30px;font-size: 18px;">湿度:{{ airnewestinfo.humidity1 }}</el-tag>
      <el-tag style="margin-left: 30px;font-size: 18px;">气压:{{ airnewestinfo.airPressure }}</el-tag>
    </div>
    <div style="position: relative;background-color: white;padding:20px;height:700px;">
      <div style="position: relative;height: 20%;width: 100%;display: inline-block;background-color: white;top:20px;">
        <div style="position: relative;height: 100%;width: 100%;">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="开始时间" style="margin-left: 80px;">
              <el-date-picker v-model="formInline.startTime" type="datetime" placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" style="margin-left: 80px;">
              <el-date-picker v-model="formInline.endTime" type="datetime" placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" style="margin-left: 80px;">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleExport" style="margin-left: 80px;">导出</el-button>
            </el-form-item>
            <el-form-item style="margin-left: 80px;">
              <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" active-text="开启采集"
                inactive-text="关闭采集" @change="handleChange">
              </el-switch>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div id="main" style="position: relative;width: 100%;overflow: auto;">
        <el-table :data="tableData" style="width: 100%" v-loading="loading" stripe>
          <el-table-column prop="No" label="序号" width="130">
          </el-table-column>
          <el-table-column prop="pm1" label="PM1.0" width="120">
          </el-table-column>
          <el-table-column prop="pm2" label="PM2.5" width="120">
          </el-table-column>
          <el-table-column prop="pm3" label="PM10" width="120">
          </el-table-column>
          <el-table-column prop="pm4" label="0.3um 以上" width="120">
          </el-table-column>
          <el-table-column prop="pm5" label="0.5um 以上" width="120">
          </el-table-column>
          <el-table-column prop="pm6" label="1.0um 以上" width="120">
          </el-table-column>
          <el-table-column prop="pm7" label="2.5um 以上" width="120">
          </el-table-column>
          <el-table-column prop="temperature" label="温度(PM) °" width="120">
          </el-table-column>
          <el-table-column prop="temperature1" label="温度 °" width="120">
          </el-table-column>
          <el-table-column prop="humidity" label="湿度(PM) %" width="120">
          </el-table-column>
          <el-table-column prop="humidity1" label="湿度 %" width="120">
          </el-table-column>
          <el-table-column prop="airPressure" label="气压 mbar" width="120">
          </el-table-column>
          <el-table-column prop="createTime" label="采集日期">
          </el-table-column>
        </el-table>
        <div style="position: relative;float:right;">
          <el-pagination layout="total, prev, pager, next" :total="total" @current-change="currentChange">
          </el-pagination>
        </div>

      </div>
    </div>

    <div id="echart" style="position: relative;height: 800px;width: 100%;display: inline-block;top:20px;">
    </div>
  </div>
</template>

<script>
import { formatDateTime } from '../../utils/baseUtil.js'
import * as echarts from 'echarts';
export default {
  data () {
    return {
      datalist: [],
      airnewestinfo: {},
      setIntervalid: null,
      formInline: {
        startTime: new Date() - 3600 * 1000 * 24 * 1,
        endTime: new Date(),
      },
      value: true,
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      loading: false,
      pm1list: [],
      pm2list: [],
      pm3list: [],
      pm4list: [],
      pm5list: [],
      pm6list: [],
      pm7list: [],
      tlist: [],
      hlist: [],
      clist: [],
      airpressurelist: []
    }
  },
  methods: {
    initChart () {
      // 检测是否已经存在echarts实例，如果不存在，则不再去初始化

      var myChart = echarts.getInstanceByDom(

        document.getElementById('echart')

      )

      // 如果为空 则正常进行渲染 反之 不再进行初始化

      if (myChart == null) {
        myChart = echarts.init(document.getElementById('echart'))

      }
      // var chartDom = document.getElementById('echart');
      // var myChart = echarts.init(chartDom);
      var option;
      var that = this;
      option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['PM1.0 浓度', 'PM2.5 浓度', 'PM10 浓度', '0.3um 以上', '0.5um 以上', '1.0um 以上', '2.5um 以上', '湿度', '温度', '气压']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: that.clist
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'PM1.0 浓度',
            type: 'line',
            stack: 'Total',
            data: that.pm1list
          }, {
            name: 'PM2.5 浓度',
            type: 'line',
            stack: 'Total',
            data: that.pm2list
          }, {
            name: 'PM10 浓度',
            type: 'line',
            stack: 'Total',
            data: that.pm3list
          }, {
            name: '0.3um 以上',
            type: 'line',
            stack: 'Total',
            data: that.pm4list
          }, {
            name: '0.5um 以上',
            type: 'line',
            stack: 'Total',
            data: that.pm5list
          }, {
            name: '1.0um 以上',
            type: 'line',
            stack: 'Total',
            data: that.pm6list
          }, {
            name: '2.5um 以上',
            type: 'line',
            stack: 'Total',
            data: that.pm7list
          },
          {
            name: '湿度 %',
            type: 'line',
            stack: 'Total',
            data: that.hlist
          },
          {
            name: '温度 °',
            type: 'line',
            stack: 'Total',
            data: that.tlist
          }, {
            name: '气压 mbar',
            type: 'line',
            stack: 'Total',
            data: that.airpressurelist
          },
        ]
      };

      option && myChart.setOption(option);

    },
    handleExport () {
      //打包要加/prod-api
      window.location.href = `/prod-api/exportExcel?startTime=${formatDateTime(this.formInline.startTime)}&endTime=${formatDateTime(this.formInline.endTime)}`;
    },
    onSubmit () {
      this.loading = true;
      this.$http.gethistoryair(this.pageNum, this.pageSize, formatDateTime(this.formInline.startTime), formatDateTime(this.formInline.endTime)).then(res => {
        if (res.code == 200) {
          console.log(res)
          this.total = res.data.total;
          this.tableData = []
          res.data.records.forEach((item, index) => {
            item.No = (this.pageNum - 1) * this.pageSize + index + 1;
            item.humidity = `${item.humidity}%`
            item.temperature = `${item.temperature}°`
            item.humidity1 = `${item.humidity1}%`
            item.temperature1 = `${item.temperature1}°`
            item.createTime = formatDateTime(item.createTime);
            this.tableData.push(item)
          })
        }
      })
      this.$http.gethistoryair(1, 10000000, formatDateTime(this.formInline.startTime), formatDateTime(this.formInline.endTime)).then(res => {
        if (res.code == 200) {
          this.pm1list = [];
          this.pm2list = [];
          this.pm3list = [];
          this.pm4list = [];
          this.pm5list = [];
          this.pm6list = [];
          this.pm7list = [];
          this.tlist = [];
          this.hlist = [];
          this.clist = [];
          this.airpressurelist = [];
          res.data.records.forEach((item, index) => {
            this.pm1list.push(item.pm1)
            this.pm2list.push(item.pm2)
            this.pm3list.push(item.pm3)
            this.pm4list.push(item.pm4)
            this.pm5list.push(item.pm5)
            this.pm6list.push(item.pm6)
            this.pm7list.push(item.pm7)
            this.tlist.push(item.temperature1)
            this.hlist.push(item.humidity1)
            this.airpressurelist.push(item.airPressure)
            this.clist.push(item.createTime)
          })
          this.loading = false;
          this.initChart()

        }
      })
    },
    currentChange (currentPage) {
      this.pageNum = currentPage;
      this.onSubmit();

    },
    handleChange () {
      let state = 0;
      if (this.value) {
        state = 1;
      } else {
        state = 2;
      }
      this.$http.redisstorage(state).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.getredisinfo();
        }
      })
    },
    getredisinfo () {
      this.$http.getredisstorage().then(res => {
        console.log(res)
        if (res.code == 200) {
          if (res.msg == '1') {
            this.value = true;
          } else {
            this.value = false;
          }
        }
      })
    },
    getairnewestfun () {
      this.$http.getairnewest().then(res => {
        if (res.code == 200) {
          this.airnewestinfo = res.data;
        }
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.onSubmit();
      this.getredisinfo();
      this.getairnewestfun();
    })
    this.setIntervalid = setInterval(() => {
      this.getairnewestfun();
    }, 1500)


  },
  beforeDestroy () {
    console.log('销毁')
    clearInterval(this.setIntervalid)
  }
}
</script>